import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as DropdownMenuStories from './DropdownMenu.stories';

<Meta of={DropdownMenuStories} />

# Dropdown Menu

The Dropdown Menu component provides a way to display a menu of options that appears when a user clicks on a trigger element. It's designed to present related actions or navigation options in a consistent and accessible format.

## Usage

<Canvas of={DropdownMenuStories.Documentation} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as User } from "@webiny/icons/person.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
import { ReactComponent as Users } from "@webiny/icons/people.svg";
import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
import { ReactComponent as Plus } from "@webiny/icons/add.svg";
import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";

const { Label, Separator, Group, Item, Link } = DropdownMenu;

const DropdownMenuExample = () => {
  return (
    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
      <Label text={"My Account"} />
      <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
      <Group>
        <Item
          icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
          text={"Billing"}
        />
        <Item
          icon={<Item.Icon element={<Settings />} label={"Settings"} />}
          text={"Settings"}
        />
        <Item
          icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
          text={"Keyboard shortcuts"}
        />
      </Group>
      <Separator />
      <Group>
        <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
        <Item
          icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
          text={"Invite users"}
        />
        <Item
          icon={<Item.Icon label={"New Team"} element={<Plus />} />}
          text={"New Team"}
        />
      </Group>
      <Separator />
      <Item
        icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
        text={"Support"}
      />
      <Item
        icon={<Item.Icon label={"API"} element={<Cloud />} />}
        text={"API"}
        disabled
      />
      <Separator />
      <Item
        icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
        text={"Log out"}
      />
      <Separator />
      <Label text={"Links"} />
      <Link
        text={"Link 1"}
        to={"#link-1"}
        icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
      />
      <Link
        text={"Link 2"}
        to={"#link-2"}
        icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
      />
      <Link
        text={"Link 3"}
        to={"#link-3"}
        icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
      />
    </DropdownMenu>
  );
};

export default DropdownMenuExample;

` }}
  additionalActions={[
    {
      title: 'Open in GitHub',
      onClick: () => {
        window.open(
          'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/DropdownMenu/DropdownMenu.tsx',
          '_blank'
        );
      },
    }
  ]}
/>

<Controls of={DropdownMenuStories.Documentation} />

```tsx
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as User } from "@webiny/icons/person.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
import { ReactComponent as Users } from "@webiny/icons/people.svg";
import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
import { ReactComponent as Plus } from "@webiny/icons/add.svg";
import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";

const { Label, Separator, Group, Item, Link } = DropdownMenu;

const DropdownMenuExample = () => {
  return (
    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
      <Label text={"My Account"} />
      <Item icon={<Item.Icon label={"Profile"} element={<User />} />} text={"Profile"} />
      <Group>
        <Item
          icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
          text={"Billing"}
        />
        <Item
          icon={<Item.Icon element={<Settings />} label={"Settings"} />}
          text={"Settings"}
        />
        <Item
          icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
          text={"Keyboard shortcuts"}
        />
      </Group>
      <Separator />
      <Group>
        <Item icon={<Item.Icon element={<Users />} label={"Team"} />} text={"Team"} />
        <Item
          icon={<Item.Icon element={<UserPlus />} label={"Invite users"} />}
          text={"Invite users"}
        />
        <Item
          icon={<Item.Icon label={"New Team"} element={<Plus />} />}
          text={"New Team"}
        />
      </Group>
      <Separator />
      <Item
        icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
        text={"Support"}
      />
      <Item
        icon={<Item.Icon label={"API"} element={<Cloud />} />}
        text={"API"}
        disabled
      />
      <Separator />
      <Item
        icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
        text={"Log out"}
      />
      <Separator />
      <Label text={"Links"} />
      <Link
        text={"Link 1"}
        to={"#link-1"}
        icon={<Link.Icon label="Link 1" element={<LinkIcon />} />}
      />
      <Link
        text={"Link 2"}
        to={"#link-2"}
        icon={<Link.Icon label="Link 2" element={<LinkIcon />} />}
      />
      <Link
        text={"Link 3"}
        to={"#link-3"}
        icon={<Link.Icon label="Link 3" element={<LinkIcon />} />}
      />
    </DropdownMenu>
  );
};

export default DropdownMenuExample;
```

## Examples

### Simple Menu with Icons

<Canvas of={DropdownMenuStories.SimpleMenuWithIcons} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";

const { Item } = DropdownMenu;

const SimpleMenuWithIconsExample = () => {
  return (
    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
      <Item
        icon={<Item.Icon label={"Billing"} element={<CreditCard />} />}
        text={"Billing"}
      />
      <Item
        icon={<Item.Icon label={"Settings"} element={<Settings />} />}
        text={"Settings"}
      />
      <Item
        icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
        text={"Keyboard shortcuts"}
      />
    </DropdownMenu>
  );
};

export default SimpleMenuWithIconsExample;
` }} />

### With Sub Menus

<Canvas of={DropdownMenuStories.WithSubMenus} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as User } from "@webiny/icons/person.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
import { ReactComponent as Users } from "@webiny/icons/people.svg";
import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
import { ReactComponent as Plus } from "@webiny/icons/add.svg";
import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
import { ReactComponent as Mail } from "@webiny/icons/mail.svg";
import { ReactComponent as MessageSquare } from "@webiny/icons/chat_bubble.svg";
import { ReactComponent as PlusCircle } from "@webiny/icons/add_circle.svg";

const { Label, Separator, Group, Item } = DropdownMenu;

const WithSubMenusExample = () => {
  return (
    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
      <Label text={"My Account"} />
      <Item icon={<Item.Icon element={<User />} label={"Profile"} />} text={"Profile"} />
      <Group>
        <Item
          icon={<Item.Icon label={"Billing"} element={<CreditCard />} />}
          text={"Billing"}
        />
        <Item
          icon={<Item.Icon label={"Settings"} element={<Settings />} />}
          text={"Settings"}
        />
        <Item
          icon={<Item.Icon label={"Keyboard shortcuts"} element={<Keyboard />} />}
          text={"Keyboard shortcuts"}
        />
      </Group>
      <Separator />
      <Group>
        <Item icon={<Item.Icon label={"Team"} element={<Users />} />} text={"Team"} />
        <Item
          icon={<Item.Icon label={"Invite user"} element={<UserPlus />} />}
          text={"Invite users"}
        >
          <Item
            icon={<Item.Icon label={"Email"} element={<Mail />} />}
            text={"Email"}
          />
          <Item
            icon={<Item.Icon label={"Message"} element={<MessageSquare />} />}
            text={"Message"}
          />
          <Separator />
          <Item
            icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
            text={"More..."}
          >
            <Item
              icon={<Item.Icon label={"Email"} element={<Mail />} />}
              text={"Email"}
            />
            <Item
              icon={<Item.Icon label={"Message"} element={<MessageSquare />} />}
              text={"Message"}
            />
            <Separator />
            <Item
              icon={<Item.Icon label={"More..."} element={<PlusCircle />} />}
              text={"More..."}
            />
          </Item>
        </Item>
        <Item
          icon={<Item.Icon label={"New Team"} element={<Plus />} />}
          text={"New Team"}
        />
      </Group>
      <Separator />
      <Item
        icon={<Item.Icon label={"Support"} element={<LifeBuoy />} />}
        text={"Support"}
      />
      <Item
        icon={<Item.Icon label={"API"} element={<Cloud />} />}
        text={"API"}
        disabled
      />
      <Separator />
      <Item
        icon={<Item.Icon label={"Log out"} element={<LogOut />} />}
        text={"Log out"}
      />
    </DropdownMenu>
  );
};

export default WithSubMenusExample;
` }} />

### With Checkbox Items

<Canvas of={DropdownMenuStories.WithCheckboxItems} source={{ code: `
import React from "react";
import { DropdownMenu, Button, Text } from "@webiny/admin-ui";

const TARGET_LEVELS = [
  {
    id: "viewer",
    label: "Viewer",
    description: "Can view content, but not modify it"
  },
  {
    id: "editor",
    label: "Editor",
    description: "Can view and modify content"
  },
  {
    id: "owner",
    label: "Owner",
    description: "Can edit and manage content permissions"
  }
];

const WithCheckboxItemsExample = () => {
  return (
    <DropdownMenu trigger={<Button variant="primary" text={"Open"} />}>
      {TARGET_LEVELS.map(level => (
        <DropdownMenu.CheckboxItem
          key={level.id}
          checked={level.id === "viewer"}
          text={
            <div>
              <Text as={"div"}>{level.label}</Text>
              <Text as={"div"} size={"sm"} className={"text-neutral-strong"}>
                {level.description}
              </Text>
            </div>
          }
          onClick={() => {
            console.log("Selected level:", level.id);
          }}
        />
      ))}
      <DropdownMenu.Separator />
      <DropdownMenu.Item text={"Remove access"} />
    </DropdownMenu>
  );
};

export default WithCheckboxItemsExample;
` }} />

### With Open Change Handler
With Open Change Handler, you can listen to the menu's open state changes.
For this you can use the `onOpenChange` prop.

<Canvas of={DropdownMenuStories.WithOnOpenChange} source={{ code: `
import React from "react";
import { DropdownMenu, Button } from "@webiny/admin-ui";
import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";

const { Item } = DropdownMenu;

const WithOnOpenChangeExample = () => {
  return (
    <DropdownMenu
      trigger={<Button variant="primary" text={"Open"} />}
      onOpenChange={opened => {
        console.log("On Open Change");
      }}
    >
      <Item
        icon={<Item.Icon element={<CreditCard />} label={"Billing"} />}
        text={"Billing"}
      />
      <Item
        icon={<Item.Icon element={<Settings />} label={"Settings"} />}
        text={"Settings"}
      />
      <Item
        icon={<Item.Icon element={<Keyboard />} label={"Keyboard shortcuts"} />}
        text={"Keyboard shortcuts"}
      />
    </DropdownMenu>
  );
};

export default WithOnOpenChangeExample;
` }} />
